<template>
  <div id='abnormal_list'>
    <div class="search-box">
      <Row type="flex">
        <Row type="flex" justify="start" class="search-item-left">
          <Col class="search-item"><span class="search-label">商品名称：</span><Input placeholder="请输入" v-model='searchObj.goodsName'></Input></Col>
          <Col class="search-item">
            <span class="search-label">门店名称：</span>
            <Select v-model="searchObj.shopName" @on-change="search" style="width:180px" filterable>
              <Option v-for="item in shopList" :value="item.shopName" :key="item.shopId">{{ item.shopName }}</Option>
            </Select>
          </Col>
          <Col class="search-item">
            <span class="search-label">状态：</span>
            <Select v-model="searchObj.status" @on-change="search" style="width:180px">
              <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </Col>
          <Col class="search-item">
            <Button class="search-btn" type="primary" style="margin-right:8px" @click="search">查询</Button>
          </Col>
          <Col class="search-item">
            <Button class="search-btn" style="margin-right:8px" @click="doReset">重置</Button>
          </Col>
        </Row>
        <Row type="flex" justify="end" class="search-item-right">
          <Col class="search-item">
            <Button v-if="exampleShow"
                    @click="exampleOpen">收起筛选
              <Icon type="ios-arrow-up" />
            </Button>
            <Button v-else
                    @click="exampleOpen">更多筛选
              <Icon type="ios-arrow-down" />
            </Button>
            </Col>
        </Row>
      </Row>
      <Row v-show='exampleShow' class="search-example">
        <Col style="margin-left: 30px;padding-top:24px;">
          <span class="search-label">日志时间：</span>
          <DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm:ss" placement="bottom" placeholder="请选择" style="width:280px" v-model='dataTime' @on-change='changeTime'></DatePicker>
        </Col>
      </Row>
    </div>
    <Table :columns='columns' :data='tableData' class="table-list" :loading="loading" :height='tableHeight'>
      <template slot-scope="{ row }" slot="status">
        <span :style="{color:(row.status === '0' ? 'red' : 'black')}">{{row.status === '0' ? '等待处理': row.status === '1' ? '已处理': ''}}</span>
      </template>
    </Table>
    <Row type='flex' justify="end" style='padding: 20px'>
      <Col>
        <Page :total="searchObj.total"
              :page-size='searchObj.pageSize'
              :current='searchObj.pageIndex'
              :page-size-opts='[20,50,100,200]'
              show-total
              show-sizer
              @on-change='changePageIndex'
              @on-page-size-change='changePageSize' />
      </Col>
    </Row>
  </div>
</template>

<script>
import { exchangeList } from '@/api/inventory/supply'
import { getShopList } from '@/api/system/store'
export default {
  name: 'abnormal_list',
  computed: {
    tableHeight () {
      return this.tableData.length > 10 ? 520 : 0
    }
  },
  watch: {
    '$route' (newRoute) {
      if (newRoute.name === 'abnormal_list') {
        this.getData()
      }
    }
  },
  data () {
    return {
      loading: false,
      exampleShow: true,
      shopList: [],
      dataTime: [],
      createTime: '',
      endTime: '',
      statusList: [
        { value: '-1', label: '全部' },
        { value: '0', label: '等待处理' },
        { value: '1', label: '已处理' }
      ],
      searchObj: {
        goodsName: '',
        shopName: '',
        status: '0',
        total: 0,
        pageIndex: 1,
        pageSize: 20
      },
      tableData: [],
      columns: [
        {
          title: '日志时间',
          key: 'createTime'
        },
        {
          title: '门店名称',
          key: 'shopName'
        },
        {
          title: '原因',
          key: 'responseContent'
        },
        {
          title: '兑换单号',
          key: 'fbillNo'
        },
        {
          title: '商品名称',
          key: 'productName'
        },
        {
          title: '数量',
          key: 'num'
        },
        {
          title: '处理时间',
          key: 'updateTime'
        },
        {
          title: '状态',
          slot: 'status'
        }
      ]
    }
  },
  methods: {
    exampleOpen () {
      this.exampleShow = !this.exampleShow
    },
    changeTime (e) {
      this.createTime = e[0]
      this.endTime = e[1]
      this.search()
    },
    doSearch () {},
    doReset () {
      this.dataTime = []
      this.createTime = ''
      this.endTime = ''
      this.searchObj = {
        goodsName: '',
        shopName: this.shopList.length > 0 ? this.shopList[0].shopName : '',
        status: '0',
        total: 0,
        pageIndex: 1,
        pageSize: 20
      }
      this.getData()
    },
    search () {
      this.searchObj.pageIndex = 1
      this.getData()
    },
    changePageIndex (index) {
      this.searchObj.pageIndex = index
      this.getData()
    },
    changePageSize (size) {
      this.searchObj.pageSize = size
      this.searchObj.pageIndex = 1
      this.getData()
    },
    getData () {
      if (this.searchObj.shopName) {
        this.loading = true
        exchangeList({
          productName: this.searchObj.goodsName,
          page_index: this.searchObj.pageIndex,
          page_size: this.searchObj.pageSize,
          status: this.searchObj.status === '-1' ? '' : this.searchObj.status, // 0未处理 1已处理
          shopName: this.searchObj.shopName,
          createTime: this.createTime,
          endTime: this.endTime
        }).then(res => {
          this.loading = false
          if (res.status === 200) {
            this.tableData = res.data.data.list || []
            this.searchObj.total = res.data.data.count
          } else {
            this.$Message.error(`${res.error || res.message || res.err}`)
          }
        }).catch(error => {
          this.$Message.error(`${error}`)
        })
      } else {
        this.$Message.error('请选择门店')
      }
    },
    // 获取门店
    getShopList () {
      getShopList({
        merchantId: this.$store.state.user.merchantId,
        offset: 0,
        limit: 99999
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.shopList = result.data || []
          if (this.shopList.length > 0) {
            this.searchObj.shopName = this.shopList[0].shopName
          }
          this.getData()
        } else {
          this.$Message.error(`${result.error}`)
        }
      }).catch(error => {
        this.$Message.error(`${error}`)
      })
    }
  },
  mounted () {
    this.getShopList()
  }
}
</script>
